<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        <el-button type="primary" @click="test011">测试011</el-button>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edithandler(scope.$index, tableData)">编辑</el-button>
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input  v-model="form.username" :disabled="form.id == null?false:true"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="savehandler">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>

export default {
    name: "App",
    components: {},
    data() {
        return {
            form: {

            },
            dialogVisible: false,
            data011: "哈哈",
            data012: [
                {id: "1", name: "1"},
                {id: "2", name: "2"},
                {id: "3", name: "3"},
                {id: "4", name: "4"},
            ],
            data013: "",
            data014: "",
            show011: true,

            tableData: [
                {"id": "1", "username": "aaa", "password": "123456"},
                {"id": "2", "username": "bbb", "password": "123456"},
                {"id": "3", "username": "ccc", "password": "123456"},
                {"id": "4", "username": "ddd", "password": "123456"},
                {"id": "5", "username": "eee", "password": "123456"},
            ],
            rules: {
              username: [
                { required: true, message: '用户名不能为空', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                { pattern: /\d/, message: '用户名必须包含数字', trigger: 'blur' }
              ]
            }
        };
    },
    mounted() {
    },
    methods: {
        test011() {

        },
        edithandler(index, rows) {
            this.form=rows[index]
            this.dialogVisible = true
        },
        test013() {
            console.log(this.data013)
        },
        test014() {
            this.data013 = "哈哈哈"
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        savehandler() {

            var userName = this.form.username;
            if(this.findUser(userName)){
                this.$message.error('错了哦，用户名' + userName + '已存在！');
            }else{
                this.tableData.push(this.form)
            }

            this.form = {}
            this.dialogVisible = false
            console.log(this.findUser(this.form.username))

        },
        findUser(username) {
            var result = false
            for (var item of this.tableData) {
                if (item.username == username) {
                    result = true;
                    break;
                }
            }
            return result;
        }
    }
}
</script>

<style scoped>
.s011 {
    margin-top: 10px;
    margin-left: 50px;
}
</style>
